import React, { Component } from 'react';
import { Grid, Tree } from '@alifd/next';
import ReactJson from 'react-json-view'
import {ApiOfActuator, ApiOfActuatorMetric} from '#/utils/actuatorApiDefine'

const { Row, Col } = Grid;

export default class Home extends Component {
  static displayName = 'Home';

  constructor() {
    super();
    this.state = {
      metricTree: [],
      json_object: {},
    };
  }

  componentWillMount() {
    let that = this;
    ApiOfActuator('metrics').then(response => {
      that.setState({
        metricTree: [{label: '指标项', key: 'metricName', selectable: false, children: response.names.map(metric => {return {label: metric, key: metric}}) }]
      })
    })
  }

  onSelect(keys, info) {
    this.fetch(keys[0]);
  }

  fetch(metric) {
    let that = this;
    ApiOfActuatorMetric(metric).then(response => {
      that.setState({
        json_object: response
      })
    })
  }

  render() {
    return (
       <Row wrap gutter="20">
        <Col l="6">
          <Tree defaultExpandAll showLine onSelect={this.onSelect.bind(this)} dataSource={this.state.metricTree} />
        </Col>
        <Col l="18">
          <ReactJson src={this.state.json_object} theme="monokai" />
        </Col>
      </Row>
    );
  }
}
